<template>
    <!-- 文字跑马灯 -->
    <div class="marquee-wrap">
        <ul class="marquee-list" :class="{ 'animate-up': animateUp }">
            <li v-for="(item, index) in listData" :key="index">
                <el-tooltip :disabled="noShowTooltip" placement="top" :content="getTooltipContent(item)" :open-delay="200">
                    <span @mouseover="onMouseOver(item)" @mouseout="onMouseOut(item)" :id="item">
                        <i class="el-icon-s-flag" style="color: red"></i>
                        <span v-if="system" style="color: #fff">{{ item }}</span>
                        <span v-else>【条目设置有更新】 {{ item }}</span>
                    </span>
                </el-tooltip>
            </li>
        </ul>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';

@Component({ name: 'RiskMarquee' })
export default class RiskMarquee extends Vue {
    @Prop() textArr: string[];
    @Prop({ default: false }) system?: boolean;
    animateUp = false;
    listData = [];
    timer = null;
    noShowTooltip = true;
    showTooltipContent: string = '';
    // mounted() {
    //     this.timer = setInterval(this.scrollAnimate, 3000);
    // }

    beforeDestroy() {
        clearInterval(this.timer);
    }

    @Watch('textArr', { immediate: true, deep: true })
    watchTextArr(newData) {
        if (newData) {
            this.listData = JSON.parse(JSON.stringify(newData));
            this.$nextTick(() => {
                clearInterval(this.timer);
                this.timer = setInterval(this.scrollAnimate, 3000);
            });
        }
    }

    scrollAnimate() {
        this.animateUp = true;
        setTimeout(() => {
            this.listData.push(this.listData[0]);
            this.listData.shift();
            this.animateUp = false;
        }, 1500);
    }

    onMouseOver(str: any) {
        console.log(str, 'str');
        // 内容超出，显示文字提示内容
        // const tag: any = this.$refs[str];
        const tag: any = document.getElementById(str);
        const parentWidth = tag.parentNode.offsetWidth; // 获取元素父级可视宽度
        const contentWidth = tag.offsetWidth; // 获取元素可视宽度
        this.noShowTooltip = contentWidth <= parentWidth;
        console.log(this.noShowTooltip);
        // if (!this.noShowTooltip) {
        console.log('clear');
        this.showTooltipContent = str;
        clearInterval(this.timer);
        this.timer = null;
        // }
    }

    onMouseOut(str: any) {
        console.log('onMouseOut');
        this.timer = null;
        // if (!this.noShowTooltip) {
        this.timer = setInterval(this.scrollAnimate, 3000);
        // }
        this.noShowTooltip = true;
    }

    getTooltipContent(str: string) {
        if (!this.noShowTooltip) {
            return this.showTooltipContent;
        } else {
            return str;
        }
    }
}
</script>
<style lang="scss" scoped>
.marquee-wrap {
    // width: 80%;
    height: 38px;
    // border-radius: 20px;
    // background: rgba($color: #000000, $alpha: 0.6);
    margin: 0 auto;
    overflow: hidden;
    .marquee-list {
        li {
            width: 100%;
            height: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            padding: 0 20px;
            list-style: none;
            line-height: 38px;
            text-align: left;
            color: #575757;
            font-size: 14px;
            // font-weight: 400;
        }
    }
    .animate-up {
        transition: all 0.5s ease-in-out;
        transform: translateY(-38px);
    }
}
</style>
